<template>
    <div class="createPost-container">
        <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
            <div class="createPost-main-container" style="margin-top: 20px;">

                <el-form-item label="用户名" prop="username" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.username" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="初始密码" prop="password" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.password" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="mobile" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.mobile" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.email" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label-width="90px" label="类型" class="postInfo-container-item">
                    <el-select v-model="postForm.user_type"
                               filterable default-first-option>
                        <el-option v-for="(item,index) in typeOptions" :key="item.type" :label="item.lable" :value="item.type" />
                    </el-select>
                </el-form-item>

                <el-form-item label-width="90px">
                    <el-button type="success" :disabled="loading" @click="submitForm">立即创建</el-button>
                </el-form-item>

            </div>
        </el-form>
    </div>
</template>

<script>

    const defaultForm = {
        username: '',
        password: '',
        mobile: '',
        email: '',
        user_type: "2",
    }

    export default {
        name: 'userAdd',
        data() {
            return {
                postForm: null,
                loading: false,
                typeOptions: [{type:"1", lable:"管理员"}, {type:"2", lable:"普通用户"}],
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                },
            }
        },
        created() {
            this.postForm = Object.assign({}, defaultForm)
        },
        methods: {
            submitForm() {
                this.$refs.postForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.$adminApi.admin_add(this.postForm).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '添加用户成功',
                                type: 'success',
                                duration: 2000
                            })
                            if (!response.code) {
                                this.$router.push({
                                    name: 'userIndex',
                                    params: {  }
                                })
                            }
                            this.loading = false
                        }).catch((e)=>{
                            this.loading = false
                        })
                    }
                })
            },

        }
    }
</script>
